<template>
  <div class="about-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>关于 SRS 管理系统</span>
        </div>
      </template>

      <div v-if="loading" class="loading-container">
        <el-skeleton animated :rows="5" />
      </div>

      <div v-else class="about-content">
        <div class="project-info">
          <h2>Simple Realtime Server 管理系统</h2>
          <p class="description">
            这是一个基于 Vue 3 和 Element Plus 构建的 SRS 流媒体服务器管理系统，
            提供实时监控、直播流管理、客户端连接管理等功能。
          </p>
        </div>

        <div class="version-info">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="管理系统版本">v1.0.0</el-descriptions-item>
            <el-descriptions-item label="SRS服务器版本">{{ serverVersion }}</el-descriptions-item>
            <el-descriptions-item label="Vue 版本">3.x</el-descriptions-item>
            <el-descriptions-item label="Element Plus 版本">^2.0.0</el-descriptions-item>
          </el-descriptions>
        </div>

        <div class="features">
          <h3>系统功能</h3>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-card shadow="hover" class="feature-card">
                <template #header>
                  <div class="card-header">
                    <span>服务器监控</span>
                  </div>
                </template>
                <p>实时监控服务器状态、CPU和内存使用情况</p>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card shadow="hover" class="feature-card">
                <template #header>
                  <div class="card-header">
                    <span>直播流管理</span>
                  </div>
                </template>
                <p>查看和管理活跃的直播流，支持搜索和过滤</p>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card shadow="hover" class="feature-card">
                <template #header>
                  <div class="card-header">
                    <span>客户端管理</span>
                  </div>
                </template>
                <p>查看连接的客户端信息，支持断开连接</p>
              </el-card>
            </el-col>
          </el-row>
        </div>

        <div class="links">
          <h3>相关链接</h3>
          <el-divider />
          <el-row :gutter="20">
            <el-col :span="8">
              <a href="https://ossrs.io/" target="_blank" class="link-item">
                <el-button type="primary" icon="Link" plain>官方网站</el-button>
              </a>
            </el-col>
            <el-col :span="8">
              <a href="https://github.com/ossrs/srs" target="_blank" class="link-item">
                <el-button type="success" icon="TopRight" plain>GitHub 仓库</el-button>
              </a>
            </el-col>
            <el-col :span="8">
              <a href="https://ossrs.io/lts/zh-cn/docs/v4/doc/getting-started" target="_blank" class="link-item">
                <el-button type="info" icon="Document" plain>文档中心</el-button>
              </a>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const loading = ref(true)
const serverVersion = ref('--')

/**
 * @description 获取服务器版本信息
 */
const getServerVersion = async () => {
  try {
    const response = await fetch('/api/v1/versions')
    const data = await response.json()
    if (data.code === 0 && data.data) {
      serverVersion.value = data.data.version || '--'
    }
  } catch (err) {
    console.error('获取服务器版本失败:', err)
    // 失败时保持默认值
  } finally {
    loading.value = false
  }
}

// 组件挂载时获取版本信息
onMounted(() => {
  getServerVersion()
})
</script>

<style scoped>
.about-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.loading-container {
  padding: 20px 0;
}

.about-content {
  padding: 10px 0;
}

.project-info {
  text-align: center;
  margin-bottom: 30px;
}

.project-info h2 {
  color: #303133;
  margin-bottom: 15px;
}

.description {
  color: #606266;
  font-size: 16px;
  line-height: 1.6;
}

.version-info {
  margin-bottom: 30px;
}

.features {
  margin-bottom: 30px;
}

.features h3 {
  margin-bottom: 15px;
  color: #303133;
}

.feature-card {
  height: 120px;
}

.links h3 {
  margin-bottom: 15px;
  color: #303133;
}

.link-item {
  text-decoration: none;
}

.link-item :deep(.el-button) {
  width: 100%;
}
</style>